<template>
	<block>
		<hxt-layout id="hxt-layout" title="文档" svc="document" initTitle="文档加载失败" @initPage="initPage">
			<view class="hxt-flex-column">
				<view class="hxt-flex bg-light" style="flex-wrap: wrap;padding: 20rpx;">
					<text>共享空间：</text>
					<view v-for="(x,idx) in objList" :key="idx">
						<text class="text-blue" @click="back(x,idx)">{{x.hdTitle}} /</text>
					</view>
					<text class="fa fa-plus text-blue padding-left-sm" v-on:click="openEdit(1,null,0)"></text>
				</view>
				<view class="hxt-flex-fill" style="height: 1px;">
					<scroll-view scroll-y style="height: 100%;" :enhanced="true" :bounces="false">
						<template v-if="list.length==0">
							<van-empty description="暂无数据"></van-empty>
						</template>
						<template v-else>
							<view class="hxt-cell" v-for="(item,index) in list" :key="index">
								<view class="hxt-flex">
									<view class="hxt-flex-fill" @click="open(item)">
										<view class="title">
											<view v-if="item.hdType==1" class="padding-tp-10"
												style="display: inline-flex;align-items: center;justify-content: center;position: relative;line-height: 1;white-space: nowrap;width: -webkit-fit-content;width: fit-content;font-size: var(--tn-font-size);padding: 10rpx 14rpx;">
												<text class="tn-icon-order"></text>
												<text style="margin-left: 10rpx;">{{item.hdTitle}}</text>
											</view>
											<view v-else class="padding-tp-10">
												<text class="tn-icon-folder-fill"></text>
												<text style="margin-left: 10rpx;">{{item.hdTitle}}</text>
											</view>
										</view>
										<view class="label">
											<text>{{item.oiName}}</text>
											<text class="margin-left-sm">{{item.makeTime}}</text>
										</view>
									</view>
									<view @click="openEdit(2,item,0)" v-if="item.hdStatus == 0&&((fn.edit&&item.oiId==currentUser.openId)||fn.root)">
										<van-tag custom-class="bg-cyanLight color-cyan" size="small"
											>编辑</van-tag>
									</view>
									<view class="margin-left-xs"
											@click="openEdit(3,item,index)" v-if="item.hdStatus == 0&&((fn.edit&&item.oiId==currentUser.openId)||fn.root)">
										<van-tag custom-class="bg-redLight color-red" size="small">删除</van-tag>
									</view>
								</view>

							</view>
						</template>
					</scroll-view>
				</view>
				<!-- <movable-area
					style="position: absolute;bottom:0;right: 0;width: 50%;pointer-events: none;">
					<movable-view :x="x" :y="y" direction="horizontal"
						style="margin-left: 100vh;pointer-events: auto;margin-top: 50vh;" @change="movableChange">
						<uni-fab v-if="obj.sfuType==1||obj.sfuType==2" ref="fab" :pattern="pattern" :content="newcontent" horizontal="right" vertical="bottom"
							direction="horizontal" @trigger="trigger" />
					</movable-view>
				</movable-area> -->
			</view>

		</hxt-layout>
		<page-container v-if="!!detail.show" :show="detail.show" @clickoverlay="detail.show=false"
			@afterleave="detail.show=false" custom-style="height:100vh;overflow:hidden;" position="bottom" :z-index="9">
			<scroll-view scroll-y style="height: 100%;" :enhanced="true" :bounces="false">
				<notify-detail :loadmsg="msg"></notify-detail>
			</scroll-view>
		</page-container>
		<page-container v-if="!!drawer.show" :show="drawer.show" @clickoverlay="drawer.show=false"
			@afterleave="drawer.show=false" custom-style="height:100vh;overflow:hidden;" position="bottom" :z-index="9">
			<view class="hxt-flex-column">
				<view class="cu-bar bg-white solid-bottom" style="background-color:#F9F9F9;">
					<view class="action">
						<text class="cuIcon-title text-orange "></text><text
							style="color: grey;">{{drawer.title}}</text>
					</view>
					<view class="action">
						<button class="cu-btn line-cyan round shadow sm" style="width:auto;"
							@click="drawer.show=false">关闭</button>
					</view>
				</view>
				<view class="hxt-flex-fill" style="height: 1px;">
					<scroll-view scroll-y style="height: 100%;" :enhanced="true" :bounces="false">
						<van-cell-group>
							<hxt-input label="上级目录" :border="true" v-model="form.hdPtitle" readonly>
							</hxt-input>
							<van-cell title="类型" custom-class="van-cell-left">
								<van-radio-group v-model="form.hdType" @change="radioChange($event,0)"
									:disabled="form.optType==1">
									<view class="hxt-flex">
										<van-radio :name="0">目录</van-radio>
										<van-radio :name="1" custom-class="padding-left-xs">文档</van-radio>
									</view>
								</van-radio-group>
							</van-cell>
							<hxt-input label="名称" :border="true" v-model="form.hdTitle" placeholder="请输入文档名称">
							</hxt-input>
							<van-cell title="公开" custom-class="van-cell-left">
								<van-radio-group v-model="form.share" @change="radioChange($event,1)"
									:disabled="form.pshare==1">
									<view class="hxt-flex">
										<van-radio :name="0">公开</van-radio>
										<van-radio :name="1" custom-class="padding-left-xs">私有</van-radio>
									</view>
								</van-radio-group>
							</van-cell>
							<block v-if="form.hdType==1">
								<van-cell title="通知内容" custom-class="van-cell-left">
									{{form.mediaList.length<=0?'请点击下面的内容标签，添加通知内容':''}}
								</van-cell>
								<edit-media :value="form.mediaList" @update="update"></edit-media>
							</block>
						</van-cell-group>
					</scroll-view>
				</view>
				<view class="hxt-flex" style="padding: 20rpx;">
					<button class="cu-btn round bg-cyan shadow" @click="submit"
						style="background-color: #1cbbb4;width: 100%;">保存</button>
				</view>
			</view>
		</page-container>
	</block>
</template>

<script>
	import * as hxt from "@/utils/hxt.js"
	import notifyDetail from '@/notify/components/notifyDetail'
	import editMedia from '@/notify/components/editMedia';
	export default {
		components: {
			notifyDetail,
			editMedia
		},
		data() {
			const app = getApp();
			return {
				currentUser: app.globalData.currentUser,
				objList: [],
				list: [],
				menuShow: false,
				msg: null,
				detail: {
					show: false
				},
				fn:{
					edit:hxt.canDo(30901),
					root:hxt.canDo(30902)
				},
				form: {
					optType: 0,
					hdPtitle: '',
					hdId: 0,
					hdPid: 0,
					hdType: 0,
					hdTitle: '',
					hdStatus: 0,
					share: 0,
					pshare: 0,
					type: 0,
					mediaList: []
				},
				drawer: {
					show: false,
					title: ''
				},
				actions: [{
					text: '修改',
					icon: 'edit'
				}, {
					text: '删除',
					icon: 'delete-o'
				}],
				showPopover: false,
			}
		},
		computed: {
			parentName: function() {
				var _this = this;
				return _this.objList.map(function(item) {
					return item.hdTitle;
				}).join(' / ') + ' / ';
			},
			actionsNew: function() {
				var _this = this;
				return [{
						icon: 'x fa fa-folder-o',
						text: '文件夹',
						disabled: false
					},
					{
						icon: 'x fa fa-file-text-o',
						text: '文件',
						disabled: false
					}
				];
			}
		},

		methods: {
			initPage: function(e) { //初始化事件
				var _this = this;
				_this.currentUser = e.user;
				_this.loadList({
					hdId: 1,
					hdTitle: '公共文档',
					share: 0
				});
			},
			open: function(obj) {
				if (obj.hdType == 1) return this.preview(obj);
				this.loadList(obj);
			},
			loadList: function(obj) {
				var _this = this;
				_this.objList.push(obj);
				hxt.post({
					url: hxt.domain + 'wx/HelperDocList',
					data: {
						id: obj.hdId
					},
					ok: function(res) {
						if (res.data.code != 0) return hxt.Notify({
							message: '加载失败：' + res.data.errmsg + '，请稍后重试！',
							type: 'danger'
						});
						_this.list = res.data.data;
					},
					fail: function(res) {
						hxt.Notify({
							type: 'danger',
							message: '加载失败：' + res.errMsg + '，请稍后重试！'
						});
					}
				});
			},
			preview: function(obj) {
				var _this = this;
				hxt.post({
					url: hxt.domain + 'pc/HelperDocInfo',
					data: {
						hdId: obj.hdId
					},
					ok: function(res) {
						if (res.data.code != 0) return hxt.Notify({
							message: '加载失败：' + res.data.errmsg + '，请稍后重试！'
						});
						_this.msg = res.data.data;
						_this.detail.show = true;
					},
					fail: function(res) {
						hxt.Notify({
							type: 'danger',
							message: '加载失败：' + res.errMsg + '，请稍后重试！'
						});
					}
				});
			},
			back: function(obj, idx) {
				var _this = this;
				_this.objList.splice(idx, _this.objList.length - idx);
				_this.loadList(obj);
			},
			openEdit: function(flag, g,index) { //1：新增；2：修改；3：删除；
			console.log(flag)
				var _this = this,
					obj = _this.objList[_this.objList.length - 1];
				if (!_this.currentUser.bucketName) {
					hxt.loading(false);
					hxt.Notify({
						type: 'danger',
						message: '暂未设置Bucket名称,请先到【个人信息】提交Bucket名称,才能上传文件'
					});
					return;
				};
				if (flag == 1) {
					_this.form = {
						optType: 0,
						hdPid: obj.hdId,
						hdId: 0,
						hdKind: 1,
						hdType: 0,
						hdTitle: '',
						hdStatus: 0,
						mediaList: [],
						share: parseInt(obj.share),
						pshare: obj.share,
						hdPtitle: obj.hdTitle
					};
					_this.drawer.title = '新建文档（目录）';
					_this.drawer.show = true;
				};
				if (flag == 2) {
					hxt.post({
						url: hxt.domain + 'pc/HelperDocInfo',
						data: {
							hdId: g.hdId
						},
						ok: function(res) {
							if (res.data.code != 0) return hxt.Notify({
								message: '加载失败：' + res.data.errmsg + '，请稍后重试！'
							});
							_this.form = res.data.data;
							_this.form.optType = 1;
							_this.form.hdPid = obj.hdId;
							_this.form.hdPtitle = obj.hdTitle;
							_this.drawer.title = '新建文档（目录）';
							_this.drawer.show = true;
						},
						fail: function(res) {
							hxt.Notify({
								type: 'danger',
								message: '加载失败：' + res.errMsg + '，请稍后重试！'
							});
						}
					});
				}
				if (flag == 3) {
					hxt.confirm("注意：删除后不能找回", "确定删除吗?", function() {
						hxt.post({
							url: hxt.domain + "pc/HelperDocSave",
							data: {
								optType: 2,
								hdId: g.hdId
							},
							ok: function(res) {
								if (res.data.code != 0) return hxt.Notify({type: 'danger',message: '删除失败：' + res.data.errmsg});
								hxt.Notify({type: 'success',message: '删除成功',duration: 1000});
								_this.list.splice(index, 1);
							},
							fail: function(res) {
								hxt.Notify({
									type: 'danger',
									message: '删除失败：' + res.errMsg
								});
							}
						});
					});
				}
			},
			radioChange: function(e, type) {
				var _this = this;
				if (type == 1) return _this.form.share = e.detail;
				_this.form.hdType = e.detail;
				_this.form.mediaList = [];
			},
			update: function(e) {
				var _this = this;
				_this.form.mediaList = e;
			},
			submit: function() {
				var _this = this,
					form = JSON.parse(JSON.stringify(_this.form));
				if (!hxt.trim(form.hdTitle)) return hxt.Notify('保存失败：文档名称不能为空');
				else if (form.mediaList.length < 1 && form.hdType == 1) return hxt.Notify("请至少添加一项通知内容");
				for (var i = 0; i < form.mediaList.length; i++) {
					var md = form.mediaList[i];
					if (md.miType == 1 && !hxt.trim(md.miTitle) && form.hdType == 1) return hxt.Notify(
						"请为通知内容第{0}项输入文字".xFormat(i + 1));
				};
				var title = _this.form.hdType == 0 ? '确定保存此目录?' : '确定保存此文档?';
				hxt.confirm(title, "",
					function() {
						var saveToServer = function() {
							var data = form,
								mediaList = data.mediaList.map(function(item, index) {
									return {
										miId: item.miId,
										miDuration: item.miDuration,
										miIndex: index,
										miSize: item.miSize,
										miTitle: item.miTitle,
										miType: item.miType,
										miUrl: item.miUrl
									}
								});
							data.mediaList = data.hdType == 1 ? encodeURIComponent(JSON.stringify(mediaList)) :
								"";
							hxt.post({
								url: hxt.domain + 'pc/HelperDocSave',
								data: data,
								ok: function(res) {
									if (res.data.code != 0) return hxt.Notify({
										message: '保存失败：' + res.data.errmsg + '，请稍后重试！'
									});
									_this.back(_this.objList[_this.objList.length - 1], _this
										.objList.length - 1);
									_this.drawer.show = false;
								},
								fail: function(res) {
									hxt.Notify({
										type: 'danger',
										message: '保存失败：' + res.errMsg + '，请稍后重试！'
									});
								}
							});
						};

						var upload = function() {
							var row = form.mediaList.find(function(item) {
								return item.miType > 1 && !item.miUrl;
							});
							if (!!row) {
								console.log(row.miType)
								hxt.uploadfile({
									path: row.rawUrl,
									name: row.miTitle,
									ossKey: _this.currentUser.bucketName + '/helper/wx',
									ok: function(res) {
										row.miUrl = res.data.url;
										upload();
									},
									fail: function(res) {
										hxt.loading(false);
										hxt.alert(res.errMsg, '上传文件失败');
									}
								});
							} else {
								hxt.loading(false);
								saveToServer();
							}
						};
						hxt.loading(true);
						upload();
					});
			},

		}
	}
</script>

<style>
	.tn-form-item {
		padding: 0 16rpx;
	}

	.linkbtn .van-button {
		height: auto;
		line-height: normal !important;
		padding: 0;
		border: none;
	}

	.bg-light {
		background-color: #F7F7F8 !important;
	}

	.padding-tp-10 {
		padding: 10rpx 0 !important;
	}
</style>